<template>
	<view class="content" style="background: #f4f4f4">
		<!-- 个人设置 -->
		<view style="height: 100px; background: #fff;
		border-radius: 15px;  display: flex; align-items: center;justify-content: space-between; width: 90%; margin:  auto;">
			<view class="" style="display: flex; align-items: center; padding: 10px;">

				<image v-if="dataActive ==1" style="border-radius: 25px; width: 60px;height:60px"
					src="../../static/nan.png"></image>
				<image v-else style="border-radius: 25px; width: 70px;height:70px" src="../../static/nv (2).png">
				</image>
				<view class="">
					<p v-if="!dataList.mobile"  @click="tologon()" style="margin: 0  0 0 15px;font-size: 20px;font-weight: 700; padding: 10rpx 0;"> 点击登录</p>

					<p v-else style="margin: 0  0 0 15px;font-size: 18px;font-weight: 700;"> ID：{{dataList.userId}}</p>
					<p v-if="dataList.express==0"    style="margin: 0  0 0 15px;font-size: 18px;font-weight: 700;"> 暂未购买</p>
					<p v-else style="margin: 0  0 0 15px;font-size: 13px;font-weight: 700;"> 到期时间：{{expressVIP}}</p>
				</view>

			</view>

		</view>
		<!--开通vip -->
		<view class="" v-if="expressVIP==0"
			style="display: flex;align-items: center;justify-content: space-around; width: 90%; margin: 40rpx auto; background: linear-gradient(to right, #e8e9ed, #dbdbe4);  height: 130rpx; border-radius: 100rpx;">
			<view class="" style="display: flex;align-items: center;">
				<image style="width: 80rpx; height: 80rpx;" src="../../static/images/user/VIP.png"></image>
				<view class="" style="font-size: 30rpx;margin-left: 20rpx; color: #7c7c88;">
					<p>开通VIP</p>
					<P>全场图书免费阅读！</P>
				</view>
			</view>

			<view @click="toVip()"
				style="display: flex;align-items: center;justify-content: center;border-radius: 30rpx; font-size: 30rpx; width: 150rpx; height: 60rpx;  background: linear-gradient(to right, #b1b1bb, #868593);color: #fff;">
				立即开通</view>
		</view>
		<view class="" v-else
			style="display: flex;align-items: center;justify-content: space-around;
			 width: 90%; margin: 40rpx auto;
			 background: linear-gradient(to right, #FADBAD,#FDCE86, #FABE5C);  height: 130rpx; border-radius: 100rpx;">

			<view class="" style="display: flex;align-items: center;">
				<image style="width: 80rpx; height: 80rpx;" src="../../static/images/user/VIP3.png"></image>
				<view class="" style="font-size: 30rpx;margin-left: 20rpx; color: #7c7c88;">
					<p style="color: #431F01;;">尊贵的超级VIP用户</p>
					<P>到期时间:2023-11-30</P>
				</view>
			</view>
			<view @click="toVip()"
				style="display: flex;align-items: center;justify-content: center;
				border-radius: 30rpx; font-size: 30rpx; width: 150rpx; height: 60rpx;
				 background: linear-gradient(to right, #FADBAD,#FDCE86, #FABE5C);color: #431F01;">
				查看详情</view>
		</view>
		<!-- 我的账户 -->
		<view class="" style="width: 90%;margin: auto; height: 230rpx;background: #fff; border-radius: 30rpx; ">
			<view class="" style="width: 90%; margin: auto; height:80rpx;padding-top: 5px;
			 line-height: 60rpx; border-bottom: 1px solid #ccc; display: flex; justify-content: space-between; ">
				<p style="font-weight: 500;color: #313131; font-size: 18px;">我的钱包</p>
				<view @click="toRecord" class="" style=" display: flex;align-items: center;">
<!--					<p style="font-weight: 600; color: #313131;font-size: 30rpx;">消费记录</p>-->
<!--					<image style=" margin-left: 20rpx; width: 25rpx; height: 25rpx;"-->
<!--						src="../../static/images/user/you.png"></image>-->
				</view>
			</view>
			<!-- 充值 -->

      <view style="display: flex;justify-content: space-around;padding-top: 12px;align-items: center">
        <view style="width: 45%;text-align: center">
          <view style="font-size: 18px">0.00</view>
          <view>书卷</view>
        </view>
        <view style="width: 1px;height: 40px;background: #bdbdbd"></view>
        <view style="width: 45%;text-align: center">
          <view style="font-size: 18px">0.00</view>
          <view>金币</view>
        </view>
      </view>

<!--			<view class=""-->
<!--				style="width: 90%;margin: auto;height: 140rpx; display: flex; align-items: center; justify-content: space-between;">-->
<!--				<view>-->
<!--					<span style="font-size: 60rpx; font-weight: 500; color:#e56159 ;">{{dataList.money}}</span>-->
<!--					<span style=" margin-left: 20rpx; font-weight: 500;">阅饼</span>-->
<!--				</view>-->
<!--				<view class="" @click="toRecharge()"-->
<!--					style="width: 150rpx; height: 60rpx; line-height: 60rpx; text-align: center; font-weight: 700; border-radius: 30rpx; background: linear-gradient(to right, #f67d34, #e5574b); color: #fff;  ">-->
<!--					充值-->
<!--				</view>-->
<!--			</view>-->
		</view>


    <view style="margin: 12px 20px;background: #fff;padding: 12px;border-radius: 8px">
      <view style="margin-bottom: 12px;font-size: 18px">活动中心</view>
      <view style="display: flex;justify-content: space-around">
        <view @click="toPlan()" style="background: #fddcdc;padding: 8px 12px;width: 45%;border-radius: 6px">
          <view style="font-weight: 600;color: #754444;">阅读计划</view>
          <view style="margin-top: 10px;margin-bottom: 4px;padding: 2px;font-size: 13px;color: #fff;background: #f16f6f;width: 60px;text-align: center;border-radius: 10px">去订购</view>
        </view>
        <view @click="toConvert()" style="background: #fcdec9;padding: 8px 12px;width: 45%;border-radius: 6px">
          <view style="font-weight: 600;color: #754444;">兑换中心</view>
          <view style="margin-top: 10px;margin-bottom: 4px;
          padding: 2px;font-size: 13px;color: #fff;
          background: #f5b055;width: 60px;text-align: center;border-radius: 10px">去兑换</view>

        </view>
      </view>
    </view>

    <view style="margin: 12px 20px;background: #fff;padding: 12px;border-radius: 8px">
      <view style="margin-bottom: 12px;font-size: 18px">每日任务</view>
      <view style="display: flex;justify-content: space-between">
        <view style="display: flex;justify-content: left">
          <view style="color: #138a3d;margin-right: 4px">●</view>
          <view>
            <view>听有声读物10分钟</view>
            <view style="width: 100%;height: 6px;border-radius: 4px;background: #e0e0e0;margin-top: 4px"></view>
          </view>
        </view>
        <view style="color: #138a3d;background: #ceecd9;font-size: 14px;padding: 2px 5px;height: 24px">去完成</view>
      </view>

    </view>


		<view class="" style="background: #fff; width: 90%; margin: 40rpx auto; border-radius: 30rpx;">
			<view class="" @click="toInvite()"
				style="width: 90%; height: 100rpx; display: flex;justify-content:space-between; width: 90%;margin: auto; border-bottom: 2rpx solid #ccc; align-items: center;">
				<view class="" style="display: flex;">
					<image style="width: 40rpx; height: 40rpx;" src="../../static/invite.png"></image>
					<p style="margin-left: 30rpx;font-size: 16px">邀请好友</p>
				</view>
				<view class="" style="display: flex; align-items: center;">
					<image style="width: 30rpx; height: 30rpx;" src="../../static/images/user/you.png"></image>
				</view>
			</view>

      <view class="" @click="toPreference()"
            style="width: 90%; height: 100rpx; display: flex;justify-content:space-between; width: 90%;margin: auto; border-bottom: 2rpx solid #ccc; align-items: center;">
        <view class="" style="display: flex;">
          <image style="width: 40rpx; height: 40rpx;" src="../../static/images/user/yuedu.png"></image>
          <p style="margin-left: 30rpx;">阅读偏好</p>
        </view>
        <view class="" style="display: flex; align-items: center;">
          <span v-if="dataActive ==1" style="margin-right: 20rpx;">男</span>
          <span v-else style="margin-right: 20rpx;">女</span>
<!--          <image style="width: 30rpx; height: 30rpx;" src="../../static/images/user/you.png"></image>-->
        </view>
      </view>

			<view class="tabulation" v-for="(item,index) in datsList" :key="index" @click="toList(index)"
				style="width: 90%; height: 100rpx; display: flex; justify-content: space-between; width: 90%; margin: auto; border-bottom: 2rpx solid #ccc; align-items: center;">
				<view class="" style="display: flex;">
					<image style="width: 40rpx; height: 40rpx;" :src="item.img"></image>
					<p style="margin-left: 30rpx;">{{item.name}}</p>
				</view>
				<view class="">
					<image style="width: 30rpx; height: 30rpx;" src="../../static/images/user/you.png"></image>
				</view>
			</view>
			<!-- <view class="" style="text-align: center;height: 50px; line-height: 50px;">
				潍坊昊天科技发展有限公司版权所有
			</view> -->


		</view>
	</view>
</template>

<script>
	import {
		getMyUserInfo
	} from '@/http/api.js'
	export default {
		data() {
			return {
				dataActive: '',
				expressVIP:'',
				userInfo: {},
				dataList: {},
				datsList: [{
					name: '设置',
					img: '../../static/images/user/shezhi.png',
				}, {
					name: '意见反馈',
					img: '../../static/images/user/yijianfankui.png',
				}, {
					name: '帮助中心',
					img: '../../static/images/user/bangzhuzhongxin.png',
				}, {
					name: '求书',
					img: '../../static/images/user/shu.png',
				}, {
					name: '客服',
					img: '../../static/images/user/kefu.png',
				}]
			}
		},
		onLoad(e) {
			console.log(e, "-=-=-=");
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo.userinfo, "个人信息");

		},
		onShow() {
			this.MyUserInfo()
		},
		onPullDownRefresh() {
						this.MyUserInfo()
						setTimeout(function () {
							uni.stopPullDownRefresh();
						}, 1000);
					},
		mounted() {
			uni.$on('message', (data) => {
				this.dataActive = data.active
				console.log('接收到的参数：', );
				// 处理接收到的参数
			});
		},
		methods: {
      //去兑换
      toConvert(){
        uni.navigateTo({
          url: '/pages/user/convert/index',
        })
      },

      //去邀请好友
      toInvite(){
        uni.navigateTo({
          url: '/pages/user/invite/invite',
        })
      },

      toPlan(){

        uni.navigateTo({
          url: '/pages/activity/plan',
        })

      },


			toRecord() {
				uni.navigateTo({
					url: './record/record'
				})
			},
			MyUserInfo() {

				let data = {
					"token": this.userInfo.userinfo.token
				}
				getMyUserInfo(data).then((res) => {
				this.expressVIP =res[1].data.data.express
				console.log(this.expressVIP);
					console.log(res[1].data.data, "用户信息");
					this.dataList = res[1].data.data
					this.dataActive = res[1].data.data.like
                     uni.stopPullDownRefresh();

				})
			},
			// 开通vip
			toVip() {
				console.log( this.expressVIP);
				uni.navigateTo({
					url: './userVIP/userVIP?id='+this.expressVIP,
				})
			},
			// 充值
			toRecharge() {
				uni.navigateTo({
					url: './recharge/recharge'
				})
			},
			// 阅读偏好
			toPreference() {
				uni.navigateTo({
					url: './preference/preference'
				})
			},
			// 设置setUp
			toList(index) {
				console.log(index);
				if (index == 0) {
					// 设置
					uni.navigateTo({
						url: './setUp/setUp'
					})
				}
				if (index == 1) {
					// 意见
					uni.navigateTo({
						url: './opinion/opinion'
					})
				}
				if (index == 2) {
					// 帮助中心
					uni.navigateTo({
						url: './helpCenter/helpCenter'
					})
				}
				if (index == 3) {
					// 求书
					uni.navigateTo({
						url: './book/book'
					})
				}
				if (index == 4) {
					// 客服
					uni.navigateTo({
						url: './customerService/customerService'
					})
				}

			},
			// 点击登录
			tologon(){
				uni.navigateTo({
					url:'/pages/logon/newLogin'
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 20px;
	}

	uni-page-body,
	uni-page-refresh {
		background-color: #f6f6f6 !important;
		min-height: 100vh;
    max-height: 100%;
	}

	.tabulation:last-child {
		border: none;
	}
</style>
